{% extends "base.html" %}

{% block content %}
<div class="container">
    <div class="couples-header">
        <h1>所有爱人</h1>
        <div class="filters">
            <select class="form-control" id="season-filter">
                <option value="">所有季数</option>
                {% for season in range(1, max_season + 1)|reverse %}
                <option value="{{ season }}">第{{ season }}季</option>
                {% endfor %}
            </select>
            <!--<select class="form-control" id="sort-filter">
                <option value="latest">最新加入</option>
                <option value="popular">最受关注</option>
                <option value="marriage_years">结婚年限</option>
            </select>-->
        </div>
    </div>

    <div class="grid couples-grid">
        {% for couple in couples.items %}
        <div class="card couple-card" data-season="{{ couple.season }}">
            <div class="couple-avatars">
                <div class="avatar-container">
                    <img src="{{ couple.husband_avatar or url_for('static', filename='images/default-avatar.png') }}" 
                         alt="{{ couple.husband_name }}" class="avatar">
                    <span class="name">{{ couple.husband_name }}</span>
                </div>
                <div class="avatar-container">
                    <img src="{{ couple.wife_avatar or url_for('static', filename='images/default-avatar.png') }}" 
                         alt="{{ couple.wife_name }}" class="avatar">
                    <span class="name">{{ couple.wife_name }}</span>
                </div>
            </div>
            <div class="couple-info">
                <div class="info-row">
                    <span class="season">第{{ couple.season }}季</span>
                    <span class="marriage-years">结婚{{ couple.marriage_years }}年</span>
                </div>
                <div class="story-preview">
                    {{ couple.story[:100] }}...
                </div>
                <div class="card-footer">
                    <span class="likes">
                        <i class="fas fa-heart"></i> {{ couple.likes_count }}
                    </span>
                    <a href="{{ url_for('main.couple_detail', id=couple.id) }}" class="btn">了解更多</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    {% if couples.pages > 1 %}
    <div class="pagination">
        {% if couples.has_prev %}
        <a href="{{ url_for('main.couples_list', page=couples.prev_num) }}" class="btn">&laquo; 上一页</a>
        {% endif %}
        
        <div class="page-numbers">
            {% for page_num in range(1, couples.pages + 1) %}
                {% if page_num == couples.page %}
                    <span class="current-page">{{ page_num }}</span>
                {% else %}
                    <a href="{{ url_for('main.couples_list', page=page_num) }}" class="page-num">{{ page_num }}</a>
                {% endif %}
            {% endfor %}
        </div>
        
        {% if couples.has_next %}
        <a href="{{ url_for('main.couples_list', page=couples.next_num) }}" class="btn">下一页 &raquo;</a>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const seasonFilter = document.getElementById('season-filter');
    const sortFilter = document.getElementById('sort-filter');
    const couplesGrid = document.querySelector('.couples-grid');

    // 季数筛选
    seasonFilter.addEventListener('change', function() {
        const season = this.value;
        const url = new URL(window.location);
        if (season) {
            url.searchParams.set('season', season);
        } else {
            url.searchParams.delete('season');
        }
        window.location = url;
    });

    // 排序 QQ:575732022
    /*sortFilter.addEventListener('change', function() {
        const sort = this.value;
        const url = new URL(window.location);
        url.searchParams.set('sort', sort);
        window.location = url;
    });*/

    // 设置当前筛选值
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.has('season')) {
        seasonFilter.value = urlParams.get('season');
    }
    if (urlParams.has('sort')) {
        sortFilter.value = urlParams.get('sort');
    }
});
</script>
{% endblock %} 